import { useState, useEffect } from "react";
import { Form, Input, Row, Col, Card, message, Alert, Typography } from "antd";
import { CommonModal } from "@/pages/OrderModule/common/components/CommonModal";
import styles from "./index.module.less";
import Iconfont from "@/components/IconFont";
import SubTitle from "@/pages/OrderModule/common/components/SubTitle";
import CommonInput from "@/pages/OrderModule/common/components/CommonInput";
import { batchPayReal } from "../../../../services";

const { TextArea } = Input;

//去支付
const goPay = ({ data, selectKeys, handleOk, handleCancel, visible }) => {
	const [form] = Form.useForm();
	const [method, setMethod] = useState(1); //1 余额

	useEffect(() => {
		form.resetFields();
	}, []);

	//点击支付
	const handleBatchPay = async val => {
		const params = {
			password: val.password,
			creditAmount: data.payMenTotalPrice,
			orderMoney: data.balanceTotalPrice,
			payMethod: method,
			orderIds: selectKeys
		};
		const { success } = await batchPayReal(params);
		if (success) {
			message.success("操作成功");
			handleOk();
		}
	};

	const onOk = () => {
		form
			.validateFields()
			.then(val => {
				handleBatchPay(val);
			})
			.catch(err => {});
	};

	const onCancel = () => {
		handleCancel();
		form.resetFields();
	};

	return (
		<CommonModal title={{ title: "确认付款" }} visible={visible} onOk={onOk} onCancel={onCancel}>
			<Form form={form} name="stock-set-remark-modal">
				<div style={{ marginBottom: "24px" }}>
					<SubTitle symbol as="s2" title="支付方式" />
					<div style={{ display: "flex" }}>
						<div>
							<Card
								className={styles.cardStyle}
								style={{ border: method == "1" ? "1px solid rgba(0, 104, 255, 1)" : "" }}
								onClick={() => setMethod(1)}
							>
								<span className={styles.absolutedCenter}>
									<Iconfont type="iconyuezhifu-copy" style={{ fontSize: 40, marginRight: 10, color: "red" }}></Iconfont>
									<div>
										<span className="common-color11" style={{ fontSize: "14px", lineHeight: "14px" }}>
											余额支付
										</span>
										<div style={{ fontSize: "10px", lineHeight: "10px", color: "rgba(255, 67, 84, 1)" }}>免手续费</div>
									</div>
								</span>

								{method == "1" && <Iconfont className={styles.checkedBox} type="icontriangle" />}
							</Card>
						</div>
						<Card
							className={styles.cardStyle}
							style={{ border: method == "10" ? "1px solid rgba(0, 104, 255, 1)" : "" }}
							onClick={() => setMethod(10)}
						>
							<span className={styles.absolutedCenter}>
								<Iconfont type="iconzhifupingtai-zhifubao-copy" style={{ fontSize: 40, marginRight: 10 }}></Iconfont>
								<div>
									<span className="common-color11" style={{ fontSize: "14px", lineHeight: "14px" }}>
										支付宝
									</span>
									{/* <div style={{ fontSize: "10px", lineHeight: "10px", color: "#ccc" }}>(手续费费率：0.29%)</div> */}
								</div>
							</span>
							{method == "10" && <Iconfont className={styles.checkedBox} type="icontriangle" />}
						</Card>
					</div>
				</div>

				<SubTitle symbol as="s2" title="支付详情" />
				<Row style={{ margin: "12px   0 16px 16px" }}>
					<Col span={12}>
						<div>
							余额应付：<span className={styles.co2641}>￥{data.balanceTotalPrice}</span>
						</div>
					</Col>
					<Col span={12}>
						<div>
							账户余额：<span className={styles.co2641}>￥{data.availBalance}</span>
						</div>
					</Col>
				</Row>

				<Row style={{ margin: "12px   0 16px 16px" }}>
					<Col span={24}>
						{method == "1" ? (
							<Form.Item name="password" rules={[{ required: true, message: "请输入支付密码" }]}>
								<CommonInput type="password" Component={Input} placeholder="请输入支付密码" aria-required />
							</Form.Item>
						) : (
							<Alert
								showIcon
								message={
									<Typography as="s1">
										选择支付宝付款后，当前只是金额预览，还未发生实际支付，等到真正“拿货”后才会从支付宝扣款。
										请您确保支付宝余额充足及状态正常，以免影响订单正常流转。
									</Typography>
								}
							/>
						)}
					</Col>
				</Row>
			</Form>
		</CommonModal>
	);
};

export default goPay;
